﻿<template>
  <div>
    <el-calendar v-model="value">
      <template
          slot="dateCell"
          slot-scope="{date, data}">
          <p
              v-show="data.type === 'current-month'"
              :class="data.isSelected&&data.isCold ===null ? 'is-selected' : ''">
            <i  v-show="taskCalender.get(parseInt(data.day.split('-').splice(2).join('-'))) === 0">{{ data.day.split('-').slice(1).join('-') }}</i>
            <el-container
                class="cellButton noPadding width_100 flex-column"
                v-show="taskCalender.get(parseInt(data.day.split('-').splice(2).join('-'))) !== 0"
                >
              <el-header class="noBack noBorder width_100" type="primary" >
                <i> {{ data.day.split('-').slice(1).join('-') }}</i>
                <el-tag class="tag" type="warning" effect="dark">
                  {{taskCalender.get(parseInt(data.day.split('-').splice(2).join('-')))}}
                </el-tag>
              </el-header>
<!--              <el-main class="footer">
                <el-tag class="tag" type="warning">
                  {{taskCalender.get(parseInt(data.day.split('-').splice(2).join('-')))}}
                </el-tag>
              </el-main>-->

            </el-container>
          </p>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
name: "ManPageRightTab1",
  data() {
    return {
      value: new Date(),
      taskCalender:new Map(),

    }
  },
  computed:{
    ...mapState('module1',['tasks']),
  },
  mounted() {
    this.getTasks(this.$cookie.get('userId'))
  },
  created(){
    this.getTasks(this.$cookie.get('userId'))
    /*let user = this.$cookie.get('userId')
    let it = new URLSearchParams()
    it.append('n','-1')
    it.append('userId',user)
    HttpManager.getTasksByMonth(it).then((response)=>{

      if(response !== -1) this.tasks = response
      console.log(response)
    })*/
    for (let i = 0; i < 32; i++) {
      this.taskCalender.set(i,0)
    }

    for (const task of this.tasks) {

      if(parseInt(this.timeToMonth(task.taskGmtOver))>parseInt(this.timeToMonth(task.taskGmtStart))){
        for (let i = parseInt(this.timeToday(task.taskGmtStart)); i < 31; i++) {
          let k = this.taskCalender.get(i)+1
          this.taskCalender.set(i,k)
        }
      }else{
        let num = parseInt(this.timeToday(task.taskGmtOver))
        let start = parseInt(this.timeToday(task.taskGmtStart))
        console.log(num)
        for (let i = start; i < num+1; i++) {
          let k = this.taskCalender.get(i)+1
          this.taskCalender.set(i,k)
        }
      }
    }

  },
  methods:{
    ...mapActions('module1',['getTasks','deleteTask']),
    timeToMonth(time) {
      if(time.length <= 11) return time;
      let datetime = new Date();
      datetime.setTime(time);
      //let year = datetime.getFullYear();
      let month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      //let date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime
          //.getDate();
      return month;
    },
    timeToday(time){
      if(time.length <= 11) return time;
      let datetime = new Date();
      datetime.setTime(time);
      let date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime
          .getDate();
      return date;
    }
  }
}
</script>

<style scoped>
.cellButton{
  height: 100%;
  background: transparent;
  box-shadow: #06f3e0 0px 2px 2px;
}

.tag{
  margin-left: 40%;
}
</style>
